<template>
    <div class="common-layout">
        <el-container>
            <!--头部-->
            <el-header>
                <el-menu
                        :default-active="activeIndex"
                        class="HomeChoose"
                        mode="horizontal"
                        :ellipsis="false"
                        @select="handleSelect"
                        router
                >
                    <el-menu-item index="0">
                        <img
                                style="width: 60px"
                                src="../assets/logo.png"
                                alt="SC logo"
                        />
                    </el-menu-item>
                    <div class="flex-grow"/>
                    <el-menu-item index="home">
                        <el-icon>
                            <House/>
                        </el-icon>
                        首页
                    </el-menu-item>
                    <el-sub-menu :index="item.path" v-for="item in menu_data" :key="item.name">
                        <template #title>
                            <el-icon>
                                <component :is="item.icon"></component>
                            </el-icon>
                            <span>{{item.name}}</span></template>
                        <el-menu-item :index="child.path" v-for="child in item.child" :key="child.name">
                            <el-icon>
                                <component :is="child.icon"></component>
                            </el-icon>
                            {{child.name}}
                        </el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="announcement">
                        <el-icon>
                            <Help/>
                        </el-icon>
                        我的消息
                    </el-menu-item>
                    <el-menu-item index="3">
                        <el-icon>
                            <Phone/>
                        </el-icon>
                        联系我们
                    </el-menu-item>


                    <div class="IDpicture">
                        <el-input v-model="input2" class="searchFunction" placeholder="请输入搜索的功能">
                            <template #suffix>
                                <el-icon class="el-input__icon">
                                    <search/>
                                </el-icon>
                            </template>
                        </el-input>
                        <el-avatar
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                        />
                    </div>
                </el-menu>

            </el-header>

            <el-main>
                <el-row>
                    <el-image style="width: 200px; height: 50px;margin-left: 8%;margin-top: 1%"
                              :src="require('@/assets/NEUSOFT.png')" :fit="fit"/>
                </el-row>

                <el-container   class="deep-container" style="border-radius:20px;border: 2px solid #FCFCFC;box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.3); width: 90%; height: 100%;margin: auto;margin-top: 2%">
                    <el-container>
                        <el-header style="padding: 0;background-color: #FCFCFC;border-radius: 20px">
                            <div style="font-family: Arial, sans-serif; font-size: 36px; font-weight: bold; margin-left: 60px;margin-top: 40px">我的订单</div>
                            <el-divider style="margin-top: 20px;margin-left: 3%; width: 93%"></el-divider>
                        </el-header>
                        <el-main style="margin-top:4%;border-radius: 20px">
                            <el-table :data="myOrder" style="width: 98%;background-color:#FCFCFC;margin-left: 15px"  :header-cell-style="{backgroundColor:'#FCFCFC'}"
                                      :cell-style="{backgroundColor:'#FCFCFC'}"
                                      :row-style="{backgroundColor:'#FCFCFC'}"
                                      height="620">
                                <el-table-column  label="商品图片" width="150px" align="center">
                                    <template #default="scope">
                                        <img :src="scope.row.goodsUrl" style="width: 100%; height: auto" /></template>
                                </el-table-column>
                                <el-table-column prop="orderId" label="sds" width="200px" align="center" v-if="false"/>
                                <el-table-column prop="goodsName" label="商品" width="200px" align="center"/>
                                <el-table-column prop="goodsPrice" label="单价" width="200px" align="center"/>
                                <el-table-column prop="goodsTotal" label="数量" width="200px" align="center"/>
                                <el-table-column prop="totalPrice" label="总计" width="200px" align="center"/>
                                    <el-table-column prop="createTime" label="订单时间" width="200px" align="center"/>
                                <el-table-column prop="orderState" label="订单状态" width="200px" align="center"/>
                                <el-table-column prop="right" label="订单处理" width="180px" align="center">
                                    <template #default="scope">
                                        <el-button size="small" @click="makeSure(scope.row)" :disabled="scope.row.orderState=='已完成'" type="primary">确认收货</el-button>
                                        <el-button size="small" type="primary" @click="deleteMyOrder(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-main>
                    </el-container>
                </el-container>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
    import *as allGoodsAPI from "../api/goods";
    import {onMounted, ref,computed} from 'vue'
    import {useStore} from 'vuex'
    import { ElMessage, ElMessageBox } from 'element-plus'

    const selectedItem = ref([])
    const myOrder=ref([])
    const store=useStore()
    const goods = ref([])
    const activeIndex = ref('1')
    const payWay=ref(false)
    let payVisible=ref(false)
    const payByWallet=ref(true)

    function formatDate(isoDate) {
        const date = new Date(isoDate);
        const year = date.getFullYear();
        const month = date.getMonth() + 1; // getMonth() 返回的是从 0 开始的月份，所以需要加 1
        const day = date.getDate();
        const hours = date.getHours();
        const minutes = date.getMinutes();
        const seconds = date.getSeconds();

        // 构建格式化后的字符串
        const formattedDate = `${year}年${month}月${day}日${hours}:${minutes}:${seconds}`
        return formattedDate;
    }

    const deleteMyOrder=(row)=>{
        allGoodsAPI.DeleteOrder({orderId:row.orderId}).then((res)=>{
            console.log(row.orderId)
            console.log("删除成功")
            ElMessage({
                message: "删除成功",
                type: 'success'
            });
            window.location.reload();
        })
    }
    const canClick=ref(true)
    const makeSure=(row)=>{
        if (row.orderState=="已发货"){
            const stateObject={
                orderId:row.orderId,
                orderState:0,
            }
            allGoodsAPI.UpdateOrder(stateObject).then((res)=>{
                console.log("确认成功")
                window.location.reload();
            })
        }
        else{

        }
    }

    //页头多级菜单
    const menu_data = ref([
      {
        name: '物业服务',
        icon: 'OfficeBuilding',
        path: '/community',
        child: [
          {
            name: '物业费缴纳',
            icon: 'ChatRound',
            path: '/stratafees',
          },
          {
            name: '车位管理',
            icon: 'Pointer',
            path: '/park',
          },
          {
            name: '报事维修',
            icon: 'ChatRound',
            path: '/maintenance',
          },
          {
            name: '事项投诉',
            icon: 'ChatRound',
            path: '/complaints',
          },
          {
            name: '访客登记',
            icon: 'ChatRound',
            path: '/visitor',
          },
        ]
      },
      {
        name: '商城',
        icon: 'Goods',
        path: '/shop',
        child: [
          {
            name: '商城首页',
            icon: 'Goods',
            path: '/shophome',
          },
          {
            name: '我的收藏',
            icon: 'Goods',
            path: '/collect',
          },
          {
            name: '我的购物车',
            icon: 'Goods',
            path: '/shoppingcart',
          },
          {
            name: '我的订单',
            icon: 'Goods',
            path: '/order',
          },
          {
            name: '我的钱包',
            icon: 'Goods',
            path: '/wallet',
          }
        ]
      },

    ])
    onMounted(() => {
        console.log(store.getters.getId)
        allGoodsAPI.allOrder({userId:store.getters.getId}).then((res) => {

            console.log("!")
            myOrder.value = res.data;
            for (let i = 0; i < myOrder.value.length; i++) {
                myOrder.value[i].createTime = formatDate(myOrder.value[i].createTime)
                const item = myOrder.value[i];
                // 修改payType
                if (item.orderState === 0) {
                    item.orderState = '已完成';
                    canClick.value = false;
                } else if (item.orderState === 1) {
                    item.orderState = '已发货';
                    canClick.value = true;
                }
            }
            console.log(store.getters.getId)
        })

    })

    const addSlash = (url) => {
        return `/${url}`
    }

</script>

<style scoped>
    .common-layout {
        width: 100%;
        height: 100%;
    }

    .common-layout .el-container {
        width: 100%;
        height: 100%;
    }

    .common-layout .el-header {
        background-color: white;
        height: 8%;
    }

    .common-layout .el-main {
        background-color: #FCFCFC;
        height: 90%;
        width: 100%;
    }

    .searchGoods {
        width: 46%;
        height: 50px;
        margin-left: 8%;
        margin-top: 30px;
        border-radius: 50px;
    }

    .searchFunction {
        height: 28px;
        width: 80%;
        right: 40px;
    }
    /*头部边框阴影*/


    .HomeChoose {
        height: 100%;
        border: none;
        padding: 0;
        box-shadow: 0px 2px 0px 0 rgba(0, 0, 0, 0.1);
        display: flex;
    }

    .flex-grow {
        flex-grow: 0;
    }

    .IDpicture {
        text-align: right;
        display: flex;
        justify-content: flex-end; /* 让头像与其他内容分开排列 */
        align-items: center; /* 垂直居中对齐 */
        margin-left: 48%; /* 调整左右内边距 */
    }
    .card-margin{
        margin-right: 40px;
    }
</style>